<template>
    <div class="tu_box" :style="{ backgroundImage: `url(${base64})` }">
        
        <el-progress :percentage="percent * 100" status="success" class="mypro"></el-progress>
    </div>
</template>

<script>
import { uploadAvatar } from '@/api/student.js';

export default {
    props: ['file'],
    async created() {
        // ********* 任务1：上传前预览 ********* 
        // 文件读取器，是JS内置的
        let fr = new FileReader();
        // DataURL俗称base64地址
        fr.readAsDataURL(this.file);
        // 当图片base64加密好（特别快）
        fr.onload = (e) => {
            this.base64 = e.target.result;
        }


        // ********* 任务2：真的上传 *********
        let fd = new FormData();
        fd.append('file', this.file);
        const res = await uploadAvatar(fd, (e) => {
            // 这是上传进度函数
            this.percent = e.loaded / e.total;
        });
        // console.log(res);

        this.$emit('done', res);
    },
    data() {
        return {
            base64: '',
            percent: 0
        }
    },
}
</script>

<style lang="less" scoped>
.tu_box {
    width: 100px;
    height: 120px;
    border: 1px solid rgb(183, 183, 183);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;

    .mypro {
        position: absolute;
        width: 100%;
        top: 40px;
        left: 20px;
    }
    
}
</style>